<template>
    <div class="home-warper">
        <div class="lft">
            <div style="width: 100%; height: 100%;">
                <el-card v-for="item in userState.list" :key="item.id">
                    <div class="flexx">
                        <img :src="item.head" style=" width: 100px; height: 100px; border-radius: 50%;" />
                        <div style="margin-left: 30px;">
                            <span style="font-weight: 700;">{{ item.name }}</span>
                            <div> 工号:{{ item.id }}</div>
                        </div>

                    </div>
                    <!-- 分割线 -->
                    <el-divider />
                    <div style="padding-top: 15px;">
                        <el-button type="warning">{{ item.purview }}— 今日值班</el-button>
                    </div>
                </el-card>
            </div>
        </div>
        <div class="rht">
            <div style="width: 100%; height: 300px; ">
                <h2 style="text-align: center;">当前科室排队情况</h2>
                <el-card v-for="item in userState2.list2" :key="item.name"
                    style="width: 100%; height: 50px; background-color: #DCDCDC;">

                    <div class="flexx2">
                        <div style="font-size: 20px"> {{ item.waitnum }}</div>
                        <span style="font-weight: 700;">{{ item.name }}</span>

                    </div>

                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// vue自带的函数
import { IUser, Imain } from '@/tylp/home.tylp';

import { reactive, watchEffect } from 'vue';
// 接口
import { infomationcenterdaylineReq, infomationcenterdepartmentlineReq } from '@/api/home.api';

const userState = reactive<{ list: IUser[] }>({

    list: []

})
const userState2 = reactive<{ list2: Imain[] }>({

    list2: []

})



watchEffect(() => {

    infomationcenterdaylineReq().then(res => {

        console.log(res.data.data);
        userState.list = res.data.data

    })



})

infomationcenterdepartmentlineReq().then(res => {
    
    console.log(res.data.data);
    userState2.list2 = res.data.data
})



</script>

<style scoped lang="scss">
.home-warper {
    width: 100%;
    height: 100%;
    display: flex;

}

.flexx {
    display: flex;
    align-items: center;
}

.lft {
    width: 70%;
    height: 800px;

}

.rht {
    width: 30%;
    height: 800px;
    // border: 1px solid;
    margin-right: 40px;
}

.el-card {
    width: 300px;
    height: 250px;

}

.flexx2 {
    width: 100%;
    height: 50px;

    display: flex;
    justify-content: space-between;

}
</style>